<template>
		<div class="search" :class="{searchFriend:$route.path!=='/index'}" v-if="isLogin">
			<div class="item">
        <Upload></Upload>
      </div>
      <div class="item">
        <input style="width:110px" type="text" placeholder="修改昵称" v-model="realname" maxlength="8" required>
        <button @click="changeRealName">修改</button>
      </div>
      <div class="item">
        <button style="width:70px;" @click="LoginOut">退出</button>
      </div>
	</div>
</template>

<script lang="ts" setup>
import Bus from "../bus"
import Upload from "./uploadImg"
import {state} from "@/observable"
import {ref, computed} from "vue"
import { useStore } from "vuex"
import axios from "@/http"
const store = useStore()
      const realname = ref<string>("")
    const username = computed(()=>store.getters.user.username)
    const isLogin = computed(()=>state.isLogin)
    const LoginOut = () => {
      localStorage.removeItem("LoginToken")
      store.dispatch("setUser",{
        username:"",
        avatar:"",
        status:0,
        id:"",
        realname:""
      })
      store.dispatch("setToken",false)      
      state.isLogin=false
    }
    const changeRealName = () => {
      if(realname.value.trim()==""){
        Bus.$emit("finishChange","error")

      }else{
        axios.post("/user/update",{
        realname:realname.value.trim(),
        username:store.getters.user.username
      }).then((res:unknown)=>{
        store.dispatch("setUserRealName",realname.value)
        realname.value=""
        Bus.$emit("finishChange","success")
      })
      }
      
    }
</script>

<style lang="scss" scoped>
@media screen and(min-width: 765px) {
  .search{
        position: absolute;
				margin-top: 15px;
				display: inline-block;
				border-radius: 10px;
				padding: 10px;
        background-color: rgba(255,255,255, .9);
        z-index: 999;
        right: 20px;
				top: 35px;
      }
      
}
			.item{
				width: 170px;
				height: 35px;
        border-bottom: 1px solid rgba(0, 0, 0, .5);
        overflow: hidden;
        text-overflow: ellipsis;
				white-space: nowrap;
				line-height: 35px;
        transition: all .3s;
        
        &:nth-child(2){
          display: flex;
          justify-content: space-between;
          align-items: center;
          button{
    border: 2px solid black;
    font-weight: 400;
    width: 50px;
    height: 30px;
    outline: none;
    border-radius: 30px;
    transition: all .4s;
    &:hover{
      background-color: black;
      color: #fff;
    }
  }
        }
        button{
    border: 2px solid black;
    width: 66px;
    height: 30px;
    outline: none;
    border-radius: 30px;
    transition: all .4s;
    &:hover{
      background-color: black;
      color: #fff;
    }
  }button{
    border: 2px solid black;
    width: 50px;
    height: 30px;
    outline: none;
    border-radius: 30px;
    transition: all .4s;
    &:hover{
      background-color: black;
      color: #fff;
    }
  }
        input{
          border: none;
          width: 71%;
          height: 100%;
          background-color: rgba(255,255,255, .9);
        }
				&:hover{
					background-color: rgba(0, 0, 0, .1);
					border-radius: 5px;
				}
			}
			.search::before{
				content: '';
        position: absolute;
        right: 65px;
				top: -19px;
				z-index: 19;
				border: 10px solid ;
				border-color: transparent transparent #fff ;   
			}

@media screen and (max-width: 765px) {
  .search{
    position: absolute;
				margin-top: 15px;
				display: inline-block;
				border-radius: 10px;
				padding: 10px;
        background-color: rgba(255,255,255, .9);
        z-index: 9999999999999;
        top: 210px;
        left:0px;
  }
  .search::before{
				content: '';
        position: absolute;
        right: 110px;
				top: -19px;
				z-index: 19;
				border: 10px solid ;
				border-color: transparent transparent rgba(255,255,255, .9)

}
.searchFriend{
  top: 130px;
  left:5px;
}

}

</style>